<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-08-29 10:59:24
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-09-11 15:01:38
 * @FilePath: \ft-apply-admin\src\views\components\TextClamp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="text" :class="[isExpand ? 'expanded' : '']" ref="textRef">
    {{ porps.content }}
  </div>
  <div class="expand-btn" v-show="showExpand" @click="isExpand = !isExpand">
    {{ !isExpand ? '展开' : "收起" }}
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
const porps = defineProps(['content']);
const showExpand = ref<boolean>(false);
const isExpand = ref<boolean>(false)
const textRef = ref(null);
const checkContentHeight = () => {
  const textContent = textRef.value as any
  const lineHeight = parseInt(window.getComputedStyle(textContent).lineHeight);
  const maxHeight = lineHeight * 3; // 3 lines height
  if (textContent.scrollHeight >= maxHeight) {
    showExpand.value = true
  }
}
onMounted(() => {
  checkContentHeight()
})
</script>

<style lang="less" scoped>
.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
  max-height: calc(1.2em * 3);
  word-break:break-all;
  font-size: 14px;
}

.expand-btn {
  color: #209ee4;
  cursor: pointer;
  pointer-events: all;
}


.expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
}
</style>